<template>
  <a-layout>
    <a-layout-content style="background: #fff;">
      <a-page-header>
        <template slot="title">
          权限菜单
        </template>
      </a-page-header>

      <a-tabs
        v-model="activeKey"
        style="margin: 0 16px;"
        type="card"
        @change="queryForm"
      >
        <a-tab-pane
          v-for="(item, index) in systemAreaTypeTreeData"
          :key="index"
          :tab="item.area_name"
        />
        <div slot="tabBarExtraContent">
          <a-tooltip style="margin-right: 6px;">
            <template slot="title">
              刷新
            </template>
            <a-icon type="reload" @click="querySystemAreaForce()" />
          </a-tooltip>
          <a-tooltip style="margin-right: 6px;">
            <template slot="title">
              设置子类
            </template>
            <a-icon
              type="setting"
              class="link"
              @click="systemAreaVisible = true"
            />
          </a-tooltip>
        </div>
      </a-tabs>

      <div style="margin: 10px 16px 0 16px;">
        顶层菜单操作:
        <a-button-group>
          <a-button @click="itemEdit()">
            添加
          </a-button>
          <a-button @click="sortItemShow(data)">
            排序
          </a-button>
          <a-button @click="itemClear">
            刷新角色菜单
          </a-button>
        </a-button-group>
      </div>

      <div style="margin: 10px 16px 0 16px;">
        <a-tree
          :tree-data="data"
          show-icon
          show-line
          default-expand-all
          :replace-fields="{
            title: 'title',
            key: 'id',
          }"
        >
          <app-icon slot="icon" slot-scope="item" :value="item.icon" />

          <span
            slot="title"
            slot-scope="item"
            :style="
              item.status != 1
                ? {
                    color: '#999',
                  }
                : {}
            "
            style="position: relative;"
            @mouseenter="handleMouseEnter($event)"
            @mouseleave="handleMouseLeave($event)"
          >
            {{ item.title }}
            <span style="color: #999; margin-left: 10px;">
              <span v-if="item.page_type == 0">目录</span>
              <span v-else-if="item.page_type == 1">
                菜单 {{ item.link_mark }} {{ item.page_url_show }}
              </span>
              <span v-else-if="item.page_type == 2">
                按钮 {{ item.page_mark }} {{ item.link_url_show }}
              </span>
            </span>

            <span class="hide_action">
              <a-tooltip v-if="item.children && item.children.length > 0">
                <template slot="title">
                  子集排序
                </template>
                <a-icon
                  class="action"
                  type="sort-ascending"
                  @click="sortItemShow(item.children)"
                />
              </a-tooltip>

              <a-tooltip>
                <template slot="title">
                  添加子菜单
                </template>
                <a-icon
                  class="action"
                  type="plus-circle"
                  @click="
                    itemEdit({
                      page_role_id: item.id,
                    })
                  "
                />
              </a-tooltip>

              <a-tooltip>
                <template slot="title">
                  修改菜单
                </template>
                <a-icon
                  class="action"
                  type="edit"
                  @click="
                    itemEdit({
                      ...item,
                    })
                  "
                />
              </a-tooltip>

              <a-popconfirm
                v-if="!item.children || item.children.length <= 0"
                title="是否删除该纪录?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="itemDelete(item)"
              >
                <a-tooltip>
                  <template slot="title">
                    删除菜单
                  </template>
                  <a-icon class="action" type="delete" />
                </a-tooltip>
              </a-popconfirm>
            </span>
          </span>
        </a-tree>
      </div>
    </a-layout-content>

    <edit
      v-model="editVisible"
      :item="editItem"
      :data="data"
      @change="fetch(searchParams)"
    />

    <app-sort
      v-model="sortVisible"
      :keys="{ label: 'title' }"
      :data="sortItemArr"
      @change="sortItemChange"
    />

    <systemAreaList :id="$e.platform" v-model="systemAreaVisible" />
  </a-layout>
</template>
<script>
import pageRole from "@/api/pageRole"
import systemAreaType from "@/api/systemAreaType"
import userRoleMenu from "@/api/userRoleMenu"

export default {
  components: {
    edit: () => import("./edit"),
    systemAreaList: () => import("../systemArea/list"),
  },
  data() {
    return {
      //平台管理
      systemAreaVisible: false,
      systemAreaTypeTreeData: [],
      activeKey: 0,

      editVisible: false,
      editItem: undefined,

      sortVisible: false,
      sortItemArr: undefined,

      data: [],

      //查询条件
      formInline: {
        status: 1,
      },
    }
  },
  mounted() {
    this.$emit("menu", "/home/pageRole/list")
    this.querySystemArea()
  },
  methods: {
    querySystemAreaForce() {
      systemAreaType.cacheClean(this.$e.platform)
      this.querySystemArea()
    },
    querySystemArea() {
      this.systemAreaTypeTreeData = []
      systemAreaType.cache(this.$e.platform).then((response) => {
        if (response.code !== 1) {
          this.$message.warning(response.message)
          return
        }
        if (response.data) {
          this.systemAreaTypeTreeData = response.data.data_menu
          if (this.systemAreaTypeTreeData.length > 0) {
            this.queryForm()
          }
        }
      })
    },
    queryForm() {
      this.fetch(this.searchParams)
    },
    async fetch(params = {}) {
      if (
        !this.systemAreaTypeTreeData ||
        !this.systemAreaTypeTreeData[this.activeKey] ||
        !this.systemAreaTypeTreeData[this.activeKey].area_code
      ) {
        return
      }
      this.data = []
      this.loading = true
      this.searchParams = params
      await pageRole
        .query({
          plat_code: this.systemAreaTypeTreeData[this.activeKey].area_code,
          plat_abbreviation: this.$e.platform,
          ...params,
          ...this.formInline,
        })
        .then((response) => {
          if (response.code !== 1) {
            this.$message.warning(response.message)
            return
          }
          if (response.data && response.data.length > 0) {
            this.data = response.data
          }
          return
        })
        .catch((e) => {
          console.log(e)
        })
      this.loading = false
    },
    //======================管理================================
    itemEdit(item) {
      this.editItem = {
        page_type: 0,
        weight: 0,
        status: 1,
        link_method: "GET",
        page_open_type: 0,
        plat_code: this.systemAreaTypeTreeData[this.activeKey].area_code,
        plat_name: this.systemAreaTypeTreeData[this.activeKey].area_name,
        plat_abbreviation: this.$e.platform,
        ...item,
      }
      if (this.editItem.page_role_id == 0) {
        this.editItem.page_role_id = undefined
      }
      this.editVisible = true
    },
    itemDelete(item) {
      if (!item || !item.id) return
      pageRole.delete(item.id).then((response) => {
        if (response.code !== 1) {
          this.$message.error(response.message)
          return
        }
        this.$message.success(response.message)
        this.queryForm()
        return
      })
    },

    handleMouseEnter(e) {
      e.target.querySelector(".hide_action").style.display = "inline-block"
    },
    handleMouseLeave(e) {
      e.target.querySelector(".hide_action").style.display = "none"
    },

    sortItemShow(itemArr) {
      this.sortItemArr = itemArr
      this.sortVisible = true
    },
    sortItemChange(items) {
      var updataMap = {}
      for (var index in items) {
        updataMap[items[index].id] = items.length - index
      }
      pageRole.sort(updataMap).then((response) => {
        if (response.code !== 1) {
          this.$message.error(response.message)
          return
        }
        this.$message.success(response.message)
        this.queryForm()
        return
      })
    },
    itemClear() {
      userRoleMenu
        .cacheClean()
        .then((response) => {
          if (response.code !== 1) {
            this.$message.warning(response.message)
            return
          }
          this.$message.success(response.message)
          return
        })
        .catch((e) => {
          console.log(e)
        })
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.ant-form-item {
  margin-bottom: 6px;
}

.changeGhost li {
  list-style: none;
  padding: 6px;
}
.changeGhost li:nth-child(2n-1) {
  background: #f8f8f8;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb !important;
}
.changeDiv {
  cursor: pointer;
}
.hide_action {
  display: none;
  padding-left: 10px;
  .action {
    padding-left: 4px;
  }
}
</style>
